<template>
  <div class="main_c">
    <div class="card_c big_box">
      <div class="content self_content">
        <div class="detail_user">
          <div class="avatar">
            <el-avatar :size="100" :src="circleUrl" />
          </div>
          <div class="info_row">
            <div class="nicheng">haodayizhi</div>
            <div class="row_detail">
              <span class="year_old">20岁</span>
              <span class="garden"> 男</span>
            </div>
          </div>
          <div class="info_box">
            <div class="common vip_g">
              <span class="label">V&ensp;I&ensp;P&emsp;:</span>
              <span class="vip">16级</span>
            </div>
            <div class="common sign_g">
              <span class="label">签&ensp;名&emsp;:</span>
              <el-tooltip
                effect="dark"
                content="这是一段话1231231243488887778"
                placement="top"
              >
                <span class="sign"> 这是一段话1231231243488887778 </span>
              </el-tooltip>
            </div>
            <div class="common emial_g">
              <span class="label">邮&ensp;箱&emsp;:</span>
              <span class="email"> 1509939219@qq.com </span>
            </div>
          </div>
        </div>
        <div class="my_send_notice">
          <div>
            <p>我发送的通知</p>
          </div>
          <NoticeListComp></NoticeListComp>
        </div>
      </div>
    </div>
    <div class="group">
      <div class="card_c littel_box detail_box">
        <div class="content">
          <div class="detail_style_box">
            <div class="comment shop_li">
              <span class="detail_desc">用户购买力</span>
              <el-progress
                class="progress_style"
                type="dashboard"
                :percentage="shopListPercent"
                :status="shopListPercent < 60 ? 'error' : 'success'"
                :color="shopListPercent < 60 ? 'red' : 'green'"
              >
                <template #default="{ percentage }">
                  <span class="percentage-value">{{ percentage }}%</span>
                  <span class="percentage-label">购买力</span>
                </template>
              </el-progress>
            </div>
            <div class="comment lost_yuan">
              <div class="statistic-card">
                <el-statistic :value="20526">
                  <template #title>
                    <div style="display: inline-flex; align-items: center">
                      月消费金额
                      <el-tooltip
                        effect="dark"
                        content="用户消费的总金额"
                        placement="top"
                      >
                        <el-icon style="margin-left: 4px" :size="12">
                          <Warning />
                        </el-icon>
                      </el-tooltip>
                    </div>
                  </template>
                </el-statistic>
                <div class="statistic-footer">
                  <div class="footer-item">
                    <span>相比上个月</span>
                    <span class="green">
                      24%
                      <el-icon>
                        <CaretTop />
                      </el-icon>
                    </span>
                  </div>
                </div>
              </div>
            </div>
            <div class="comment sale_li">
              <span class="detail_desc">享受的优惠力度</span>
              <el-progress
                class="progress_style"
                type="dashboard"
                :percentage="shopListPercent"
                :status="shopListPercent < 60 ? 'error' : 'success'"
                :color="shopListPercent < 60 ? 'red' : 'green'"
              >
                <template #default="{ percentage }">
                  <span class="percentage-value">{{ percentage }}%</span>
                  <span class="percentage-label">优惠力度</span>
                </template>
              </el-progress>
            </div>
            <div class="comment order_count">
              <div class="statistic-card">
                <el-statistic :value="156">
                  <template #title>
                    <div style="display: inline-flex; align-items: center">
                      月订单数
                      <el-tooltip
                        effect="dark"
                        content="用户消费的月订单"
                        placement="top"
                      >
                        <el-icon style="margin-left: 4px" :size="12">
                          <Warning />
                        </el-icon>
                      </el-tooltip>
                    </div>
                  </template>
                </el-statistic>
                <div class="statistic-footer">
                  <div class="footer-item">
                    <span>相比上个月</span>
                    <span class="red">
                      24%
                      <el-icon>
                        <CaretTop />
                      </el-icon>
                    </span>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="card_c littel_box good_recrod">
        <div class="content">
          <LinePicComp></LinePicComp>
        </div>
      </div>
      <div class="card_c littel_box good_list">
        <div class="content">
          <GoodListComp></GoodListComp>
        </div>
      </div>
    </div>
  </div>
</template>
<script setup lang="ts">
import LinePicComp from "./component/linepic.vue";
import NoticeListComp from "./component/notice_list.vue";
import GoodListComp from "./component/goodList.vue";

import { ref } from "vue";

import { reactive, toRefs } from "vue";

import router from "../../router";
console.log(router);

const state = reactive({
  circleUrl:
    "https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png",
  squareUrl:
    "https://cube.elemecdn.com/9/c2/f0ee8a3c7c9638a54940382568c9dpng.png",
  sizeList: ["small", "", "large"] as const,
});
// const { circleUrl, squareUrl, sizeList } = toRefs(state);
const { circleUrl } = toRefs(state);
let shopListPercent = ref(20);
</script>
<style lang="scss" scoped>
.big_box {
  grid-column: span 1;
  height: max-content;
}
@media (max-width: 956px) {
  .big_box {
    grid-auto-columns: auto;
    grid-column: span 2;
  }
}
.group {
  grid-column: span 2;
  display: flex;
  flex-direction: column;
  height: max-content;
  .littel_box {
    margin-bottom: 5px;
    &:nth-last-child(1) {
      margin-bottom: 0px;
    }
  }
  .detail_box {
    min-height: 24%;
    height: max-content;
  }
  .good_recrod {
    min-height: 300px;
    max-height: max-content;
  }
  .good_list {
    min-height: 300px;
    max-height: max-content;
  }
}

.detail_style_box {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  grid-auto-rows: auto;
  gap: 10px;
  min-height: 100%;
  background-color: #f5f5f5;
  .comment {
    border-radius: 10%;
    background-color: #fff;
  }
  .shop_li,
  .sale_li {
    grid-column: span 1;
    .detail_desc {
      display: block;
      font-size: 20px;
      font-weight: 600;
      color: #908f8f;
      text-align: start;
      width: 100%;
      margin: 20px 0px 20px 20px;
    }
  }
  .lost_yuan,
  .order_count {
    grid-column: span 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }
}
.card_c {
  box-shadow: none;
}
.percentage-value {
  display: block;
  font-size: 28px;
}
.percentage-label {
  display: block;
  margin-top: 10px;
  font-size: 12px;
}

// 静态数据统计：
:global(h2#card-usage ~ .example .example-showcase) {
  background-color: var(--el-fill-color) !important;
}

.el-statistic {
  --el-statistic-content-font-size: 28px;
}

.statistic-card {
  height: 100%;
  padding: 50px 0px;
  display: flex;
  border-radius: 4px;
  background-color: var(--el-bg-color-overlay);
}

.statistic-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  font-size: 12px;
  color: var(--el-text-color-regular);
  margin-top: 90px;
}

.statistic-footer .footer-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.statistic-footer .footer-item span:last-child {
  display: inline-flex;
  align-items: center;
  margin-left: 4px;
}

.green {
  color: var(--el-color-success);
}
.red {
  color: var(--el-color-error);
}

// 用户信息
.self_content {
  background-color: #f5f5f5;
}
.detail_user {
  display: flex;
  flex-direction: column;
  align-items: center;
  // 背景颜色，做成渐变色，亮色温和的渐变色
  background: linear-gradient(135deg, #e0f6ae, #a7f8b2);
  border-radius: 5%;
  width: 100%;
  height: max-content;
  padding: 40px 0px 10px 0px;
  .avatar {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100px;
    height: 100px;
    margin-bottom: 20px;
  }
  .info_row {
    display: flex;
    align-items: center;
    flex-direction: column;
    font-size: 20px;
    width: 100%;
    .nicheng {
      font-weight: 600;
      font-size: 30px;
      color: #908f8f;
      margin-bottom: 10px;
    }
    .row_detail {
      color: #908f8f;
      width: 100%;
      border-bottom: 1px solid #908f8f;
      padding-bottom: 10px;
      span {
        width: 100%;
        margin: 10px;
      }
    }
  }
  .info_box {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-around;
    width: 100%;
    .common {
      display: flex;
      margin: 10px;
      width: 100%;
    }
    .label {
      display: block;
      width: 50%;
      font-weight: 600;
      font-size: 18px;
      color: #434343;
      padding-left: 160px;
    }
    .sign {
      display: block;
      width: 180px;
      // 文本溢出隐藏
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
    }
    // .email {
    //   padding-right: 100px;
    // }
  }
}
.my_send_notice {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background: linear-gradient(135deg, #e0f6ae, #a7f8b2);
  margin-top: 20px;
  height: 410px;
  border-radius: 5%;
  div {
    p {
      color: #504f4f;
      font-weight: 600;
    }
  }
}
</style>
